<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  // import { http } from '@/utils/http.js'
  // import Tabbar from '@/components/TabbarCustom.vue'

  import Api from './api/index.js'
  import dayjs from 'dayjs'

  console.log(dayjs())
  const __Api = new Api()

  const list = ref([])
  const query = ref({
    type: 1,
    limit: 10,
    page: 1,
  })
  const sdata = ref({
    startY: 0,
    isLoading: false,
  })
  function returnAddTime(item) {
    return dayjs(item * 1000).format('MM/DD HH:mm')
    // console.log(dayjs())
  }
  function init() {
    __Api.energyLog(query.value).then((res) => {
      if (res.st == 1) {
        list.value = list.value.concat(res.data)
      }
    })
  }
  function changeTab(e) {
    if (query.value.type != e) {
      list.value = []
      query.value.page = 1
      query.value.type = e
      init()
    }
  }
  // function touchStart(e) {
  //   sdata.value.startY = e.touches[0].clientY
  // }
  // function touchMove(e) {
  //   // 这里可以加入更复杂的逻辑判断
  //   let currentY = e.touches[0].clientY
  //   console.log(currentY, sdata.value.startY)
  //   if (currentY > sdata.value.startY) {
  //     // 向下滑动
  //     sdata.value.isLoading = true
  //   }
  // }
  // function touchEnd(e) {
  //   if (sdata.value.isLoading) {
  //     // 模拟数据加载
  //     sdata.value.isLoading = false
  //   }
  // }
  function scrolltoupper() {
    query.value.page = 1
    list.value = []
    init()
  }
  function scrolltolower() {
    query.value.page++
    init()
  }
  function goBack() {
    console.log(1)
    uni.navigateBack()
  }
  onShow(() => {
    init()
    // uni.hideTabBar()
  })
</script>

<template>
  <view class="warp">
    <view class="war-top">
      <view class="war-back" @click="goBack()">
        <view class="back-aim"> </view>
      </view>
    </view>
    <image
      class="bgImg"
      src="https://ojqn.wm2177.com/wechat_imgs/ball/bg-home.jpg"
      mode=""
    ></image>
    <view class="content">
      <view class="tab">
        <view
          @click="changeTab(1)"
          :class="{ tabed: query.type == 1 ? true : false }"
        >
          开奖记录
        </view>
        <view
          @click="changeTab(2)"
          :class="{ tabed: query.type == 2 ? true : false }"
        >
          我的记录
        </view>
      </view>

      <scroll-view
        class="list_Box"
        scroll-y="true"
        :lower-threshold="120"
        @scrolltolower="scrolltolower"
        @scrolltoupper="scrolltoupper"
      >
        <view v-for="(item, index) in list" :key="index" class="list_item">
          <view class="" style="display: flex; align-items: center">
            <image class="userIcon" :src="item.himg"></image>
            <view class="userInfo">
              <view class="">
                {{ item.nickname ? item.nickname[0] : '' }}****
              </view>
              <view class="">{{ returnAddTime(item.add_time) }}</view>
            </view>
          </view>
          <view class="" style="display: flex; align-items: center">
            <image class="prize_type" :src="item.rule_img"></image>
            <image class="prize_img" :src="item.img"></image>
          </view>
        </view>
      </scroll-view>
      <view class="refresh" v-if="sdata.isLoading"> 下拉刷新... </view>
    </view>
  </view>
</template>
<style lang="less" scoped>
  .war-top {
    padding-left: 18rpx;
    position: fixed;
    z-index: 99999;
    top: 88rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    .war-back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 57rpx;
      height: 57rpx;
      background-color: rgba(7, 1, 53, 0.5);
      border-radius: 50%;

      .back-aim {
        width: 20rpx;
        height: 20rpx;
        border-top: 4rpx solid #fff;
        border-left: 4rpx solid #fff;
        transform: rotate(-45deg);
      }
    }
  }
  .warp {
    width: 100%;
    height: 100vh;
    position: relative;
    .bgImg {
      width: 100%;
      height: 100%;
    }
    .content {
      padding-top: 190rpx;
      position: absolute;
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      top: 0;
      left: 0;
      z-index: 10000;
      box-sizing: border-box;
      .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        view {
          width: 175rpx;
          height: 58rpx;
          line-height: 58rpx;
          text-align: center;
          font-size: 32rpx;
          font-weight: bold;
          color: #dac996f5;
        }
        .tabed {
          color: #472a02 !important;
          border-radius: 8rpx;
          background: linear-gradient(
            0deg,
            rgba(224, 196, 117, 0.96),
            rgba(255, 245, 216, 0.96)
          ) !important;
        }
      }
      .list_Box {
        width: 100%;
        height: 80vh;
        margin-top: 20px;
        overflow-y: auto; /* 使得内容可以垂直滚动 */
        padding-bottom: 20rpx;
        box-sizing: border-box;
        .list_item {
          width: 650rpx;
          margin: 0 auto;
          margin-bottom: 20rpx;
          height: 130rpx;
          background: rgba(255, 255, 255, 0.15);
          border-radius: 8rpx;
          padding: 0 10rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .userIcon {
            width: 84rpx;
            height: 84rpx;
            border-radius: 100%;
          }
          .userInfo {
            margin-left: 20rpx;
            color: #fff;
            font-size: 26rpx;
          }
          .prize_type {
            margin-right: 82rpx;
            width: 107rpx;
            height: 111rpx;
          }
          .prize_img {
            width: 108rpx;
            height: 117rpx;
          }
        }
      }
    }
  }
</style>
